<template>
	<view class="shoplist">
		<view class="list-name">
			<img src="@/static/猫爪.png" alt="">
			店铺列表
		</view>
		<li class="item">
			<view class="item-box" v-for="(item,idx) in shopList" key="idx" @click="gotoDetail(idx)">
				<img class="item-box-img" :src="item.photo" alt="">
				<view class="item-box-text">
					{{item.sname}}
				</view>
			</view>
		</li>
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive
	} from "vue"
	const props = defineProps({
		shop: {
			type: Array
		}
	})
	let shopList = reactive(props.shop);


	function gotoDetail(idx) {
		//在起始页面跳转到test.vue页面并传递参数
		uni.navigateTo({
			url: '/pages/index/shop-detail'
		});
		// console.log('shopList[idx]=',shopList[idx])
		uni.$emit('update', shopList[idx])
	}
</script>

<style scoped>
	.shoplist {
		width: 710rpx;
		background-color: #8e83ae;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.list-name {
		font-size: 40rpx;
		font-weight: 600;
		color: #fff;
		margin-bottom: 10rpx;
		letter-spacing: 5rpx;
	}

	.list-name>img {
		height: 80rpx;
		width: auto;
		vertical-align: -20rpx
	}

	.item-box {
		width: 630rpx;
		height: 200rpx;
		border-radius: 25rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		margin: 0 auto;
		margin-bottom: 35rpx;
	}

	.item-box-img {
		width: 150rpx;
		height: 150rpx;
		margin: 30rpx 50rpx;

	}

	.item-box-text {
		max-width: 400rpx;
		color: #6b565d;
		font-weight: 700;
		align-items: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;


	}
</style>
